<template>
    <section>
        <!--工具条-->


        <!--列表-->
        <el-table :data="accountList" highlight-current-row v-loading="listLoading"
                  style="width: 100%;margin-bottom: 80px;margin-top: 90px">
            <el-table-column label="id" type="index" width="50" align="center">
            </el-table-column>
            <el-table-column prop="agentCode" label="账户标识" width="200" align="center">
            </el-table-column>
            <el-table-column prop="account" label="帐号" width="150" align="center">
            </el-table-column>
            <el-table-column prop="password" label="密码" width="150" align="center">
            </el-table-column>
            <el-table-column prop="loginStatus" label="登陆状态" min-width="100" align="center">
            </el-table-column>
            <el-table-column prop="appName" label="APP名称" min-width="150" align="center">
            </el-table-column>
            <el-table-column prop="merchantCode" label="商户标识" min-width="150" align="center">
            </el-table-column>
            <el-table-column prop="refreshToday" label="今天刷新" min-width="100" align="center">
            </el-table-column>
            <el-table-column prop="loginDt" label="最近登陆" min-width="150" align="center">
            </el-table-column>
            <el-table-column prop="orderCnt" label="订单数量" min-width="100" align="center">
            </el-table-column>

            <el-table-column label="操作" width="150" align="center">
                <template scope="scope">
                    <div style="display: flex;flex-direction: row;justify-content: space-between">
                        <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button size="small" type="danger" @click="handleDel(scope.$index, scope.row)">删除
                        </el-button>
                    </div>

                </template>
            </el-table-column>
        </el-table>

        <el-col :span="24" style="background-color: white;position: fixed;top: 0">
            <div style="display: flex;justify-content: space-between;padding-top: 20px;padding-left: 20px;height: 80px;">
                <el-form :inline="true">
                    <el-form-item>
                        <p>商户:</p>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="merchantCode" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in merchantList"
                                    :key="item.merchantCode"
                                    :label="item.name"
                                    :value="item.merchantCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="getAccountMgList">查询</el-button>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button style="margin-bottom: 20px;margin-right: 20px" plain type="primary"
                               v-on:click="handleAdd()">新增账号
                    </el-button>
                    <el-button style="margin-bottom: 20px;margin-right: 20px" plain type="warning"
                               v-on:click="handleMerchantAdd()">新增商户
                    </el-button>
                </div>

            </div>
            <p style="background-color: #eeeeee;height: 10px;width: 100%"/>
        </el-col>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20"
                           :total="total"
                           style="float:right;">
            </el-pagination>
        </el-col>

        <!--编辑界面-->
        <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="80px" ref="editForm">
                <el-form-item label="账户标识" prop="name">
                    <el-input v-model="editForm.agentCode" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="账户">
                    <el-input v-model="editForm.account"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input class="amount-style" type="text" v-model="editForm.password"></el-input>
                </el-form-item>
                <el-form-item label="APP名称">
                    <el-input class="amount-style" type="text" v-model="editForm.appName"></el-input>
                </el-form-item>
                <el-form-item label="商户标识">
                    <el-input class="amount-style" type="text" v-model="editForm.merchantCode"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

        <el-dialog title="新增账户" :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="80px" ref="addForm">
                <el-form-item label="账户标识" prop="name">
                    <el-input v-model="addForm.agentCode" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="账户">
                    <el-input v-model="addForm.account"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input class="amount-style" type="text" v-model="addForm.password"></el-input>
                </el-form-item>
                <el-form-item label="商户标识">
                    <el-select v-model="addForm.merchantCode" clearable placeholder="请选择">
                        <el-option
                                v-for="item in merchantList"
                                :key="item.merchantCode"
                                :label="item.name"
                                :value="item.merchantCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="阶段">
                    <el-input class="amount-style" type="text" v-model="addForm.stage"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
        <el-dialog title="新增商户" :visible.sync="addMerchantVisible" :close-on-click-modal="false">
            <el-form :model="addMerchant" label-width="80px" ref="addMerchant">
                <el-form-item label="商户标识">
                    <el-input class="amount-style" type="text" v-model="addMerchant.merchantCode"></el-input>
                </el-form-item>
                <el-form-item label="验证码">
                    <el-radio v-model="addMerchant.hasCapcha" label="0">没有</el-radio>
                    <el-radio v-model="addMerchant.hasCapcha" label="1">有</el-radio>
                </el-form-item>
                <el-form-item label="后台地址">
                    <el-input class="amount-style" type="text" v-model="addMerchant.systemUrl"></el-input>
                </el-form-item>
                <el-form-item label="API地址">
                    <el-input class="amount-style" type="text" v-model="addMerchant.apiDomain"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addMerchantVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addMerchantSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    // import bases from '../../api/config.js'

    export default {
        data() {
            return {
                merchantList: [],
                merchantCode: '',
                accountList: [],
                total: 0,
                page: 1,
                listLoading: false,

                editFormVisible: false,//编辑界面是否显示
                editLoading: false,

                editForm: {},

                addLoading: false,
                addFormVisible: false,
                addForm: {},
                addMerchantVisible: false,
                addMerchant: {},

            }
        },
        methods: {
            handleCurrentChange(val) {
                this.page = val;
                this.getAccountMgList();
            },
            //获取商户账号列表
            getMerchantList() {
                this.$api.getMerchantList().then(res => {
                    this.merchantList = res.list;
                });
            },
            getAccountMgList() {
                let param = {
                    currentPage: this.page,
                    merchantCode: this.merchantCode
                };
                this.listLoading = true;
                this.$api.getAccountMGList(param).then(res => {
                    this.total = res.page.totalCount;
                    this.accountList = res.data.list;
                    this.listLoading = false;
                    // NProgress.done();
                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },

            handleAdd() {
                this.addFormVisible = true;
            },
            handleMerchantAdd() {
                this.addMerchantVisible = true;
            },
            handleDel: function (index, row) {
                console.log(row)
                this.$api.getAccountDel({
                    account: row.account,
                    code: row.merchantCode
                }).then(() => {
                    this.getAccountMgList();
                })
            },
            //编辑
            editSubmit: function () {
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.editLoading = true;
                    let para = Object.assign({}, this.editForm);
                    this.$api.getAccountUpdate(para).then(() => {
                        this.editLoading = false;
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                        this.$refs['editForm'].resetFields();
                        this.editFormVisible = false;
                        this.getAccountMgList();
                    });
                });
            },

            addSubmit: function () {
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.addLoading = true;
                    let para = Object.assign({}, this.addForm);
                    this.$api.getAccountAdd(para).then(() => {
                        this.addLoading = false;
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                        this.addForm={}
                        this.addFormVisible = false;
                        this.getAccountMgList();
                    }).catch(()=>{
                        this.addLoading = false;

                    });
                });
            },
            addMerchantSubmit: function () {
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.addLoading = true;
                    let para = Object.assign({}, this.addMerchant);
                    this.$api.getMerchantAdd(para).then(() => {
                        this.addLoading = false;
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                        this.addMerchant={}
                        this.addMerchantVisible = false;
                        this.getMerchantList();
                    }).catch(()=>{
                        this.addLoading = false;
                    });
                });
            },
        },
        mounted() {
            this.getMerchantList();
            this.getAccountMgList();
        }
    }

</script>

<style scoped>
    .toolbar {
        background: #f2f2f2;
        /*/ / border:  1 px solid #dfe6ec;*/
        padding: 10px 20px 40px 0;
        position: fixed;
        bottom: 0;

    }
</style>